<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      // 提示文字的组件
      function UserGreeting(props) {
        return <h1>Welcome back!</h1>;
      }
      function GuestGreeting(props) {
        return <h1>Please sign up.</h1>;
      }
      function Greeting(props) {
        const isLoggedIn = props.isLoggedIn;
        if (isLoggedIn) {
          return <UserGreeting />;
        }
        return <GuestGreeting />;
      }
      // 登录，登出 按钮 --组件
      function LoginButton(props) {
        return (
          <button onClick={props.onClick}>
            Login
          </button>
        );
      }
      function LogoutButton(props) {
        return (
          <button onClick={props.onClick}>
            Logout
          </button>
        );
      }
      // LogControl 组件
      class LoginControl extends React.Component {
        constructor(props) {
          super(props);
          this.state = {isLoggedIn: false};
          this.handleLoginClick = this.handleLoginClick.bind(this);
          this.handleLogoutClick = this.handleLogoutClick.bind(this);
        }
        handleLoginClick() {
          this.setState({isLoggedIn: true});
        }
        handleLogoutClick() {
          this.setState({isLoggedIn: false})
        }
        render() {
          const isLoggedIn = this.state.isLoggedIn;
          let button = null;
          if (isLoggedIn) {
            button = <LogoutButton onClick={this.handleLogoutClick}/>;
          }
          else {
            button = <LoginButton onClick={this.handleLoginClick}/>;
          }
          return (
            <div>
              <Greeting isLoggedIn={isLoggedIn} />
              {button}
            </div>
          );
        }
      }

      // 使用 &&
      function Mailbox(props) {
        const unreadMessage = props.unreadMessage;
        return (
          <div>
            <h1>Hello!</h1>
            {unreadMessage.length > 0 &&
              <h2>
                You have {unreadMessage.length}unread message.
              </h2>
            }
          </div>
        );
      }
      const message = ['React', 'Re: React', 'Re:Re: React'];

      // 使用 三目运算符判断生成控件
      // 使用 提前return null 阻止控件的渲染

      // 下一个例子
      function WarningBanner(props) {
        if (!props.warn) {
          return null;
        }
        return (
          <div className="warning">
            Waring!
          </div>
        );
      }
      class Page extends React.Component {
        constructor(props) {
          super(props);
          this.state = {showWarning: true}
          this.handleToggleClick = this.handleToggleClick.bind(this);
        }
        handleToggleClick() {
          this.setState(prevState => ({
            showWarning: !prevState.showWarning
          }));
        }
        render() {
          return (
            <div>
              <WarningBanner warn={this.state.showWarning} />
              <button onClick={this.handleToggleClick} >
                {this.state.showWarning ? 'Hide' : 'Show'}
              </button>
            </div>
          );
        }
      }
      ReactDOM.render(
        // <LoginControl/>,
        // <Mailbox unreadMessage={message} />,
        <Page />,
        document.getElementById('root')
      );

    </script>
  </body>
</html>
